<div id="outputOperation">
    <!--页面调整-->
    <el-row v-loading="showLoading"
            element-loading-text="拼命加载中">
        <el-col :span="24">
            <div class="inner btn-nav">
                <el-input
                        v-model="ckCkdjNo"
                        icon="search"
                        placeholder="出库单号"></el-input>
                <el-date-picker
                        v-model="date"
                        type="daterange"
                        align="right"
                        placeholder="下单时间"
                        class="datePicker"
                        :picker-options="pickerOptions">
                </el-date-picker>
                <el-date-picker
                        v-model="date2"
                        type="daterange"
                        align="right"
                        placeholder="制作时间"
                        class="datePicker"
                        :picker-options="pickerOptions">
                </el-date-picker>
                <el-select v-model="ckStatus" placeholder="请选择">
                    <el-option :value="-1" label="全部"></el-option>
                    <el-option :value="21" label="部分分拣"></el-option>
                    <el-option :value="22" label="部分下架"></el-option>
                    <el-option :value="31" label="全部分拣"></el-option>
                    <el-option :value="32" label="全部下架"></el-option>
                </el-select>
                </el-form-item>
                <button @click="multiSelectClick" class="btn btn-multiSelect"><i
                        class="icon sel"></i><span>多选</span>
                </button>
                <button @click="multiSelectPrintCombinedSortingList" class="btn btn-Issued" v-show="multiSelect"><i
                        class="icon issued1"></i><span>打印组合分拣单</span>
                </button>
                <button @click="multiSelectOffTheShelf" class="btn btn-Issued" v-show="multiSelect"><i
                        class="icon issued1"></i><span>下架</span>
                </button>
            </div>
            <el-table
                    :data="outputOperation"
                    :default-sort="{prop: 'rkSjsj', order: 'descending'}"
                    :max-height="config_table_height()"
                    @toggleRowSelection="rowSelection"
                    @expand="expandChange"
                    @selection-change="handleSelectionChange"
                    ref="table"
                    class="outputOperationTable"
                    style="width: 100%">
                <el-table-column
                        type="expand">
                    <template scope="props">
                        <el-carousel
                                arrow="hover"
                                indicator-position="none"
                                height="500px"
                                :autoplay="false">
                            <el-carousel-item>
                                <el-row>
                                    <el-col :span="10">
                                        <el-row
                                                v-loading="props.row.historyLoading"
                                                element-loading-text="拼命加载中">
                                            <el-col><h3>单号历史记录</h3></el-col>
                                            <el-col
                                                    :span="20"
                                                    style="min-height: 386px;height: 386px;overflow: scroll;">
                                                <el-steps
                                                        :space="100"
                                                        :active="props.row.historyLength"
                                                        process-rkStatus="success"
                                                        finish-rkStatus="finish"
                                                        direction="vertical">
                                                    <el-step
                                                            :title="history.createTime"
                                                            :description="history.description"
                                                            v-for="history in props.row.history"></el-step>
                                                </el-steps>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="14">
                                        <h3>出库操作详细<span
                                                style="font-size: 14px;
                                            font-weight: normal;
                                            margin-left: 5px;">(翻页查看出库明细）</span>
                                        </h3>
                                        <el-form label-position="left" inline class="demo-table-expand">
                                            <el-form-item label="出库单号">
                                                <el-tag type="success">{{props.row.ckCkdjNo}}</el-tag>
                                            </el-form-item>
                                            <el-form-item label="下单时间">
                                                <span>
                                                     <el-icon name="time"></el-icon>
                                                    {{ auto_time_new(props.row.ckXdsj,6) }}
                                                </span>
                                            </el-form-item>
                                            <!--<el-form-item label="客户编号">-->
                                            <!--<span>{{ props.row.ckCkdjClientno }}</span>-->
                                            <!--</el-form-item>-->
                                            <el-form-item label="客户名称">
                                                <span>{{ props.row.ckCkdjClientname }}</span>
                                            </el-form-item>
                                            <el-form-item label="联系人">
                                                <span>{{ props.row.ckContacts }}</span>
                                            </el-form-item>
                                            <el-form-item label="电话">
                                                <span>{{ props.row.ckTel }}</span>
                                            </el-form-item>
                                            <el-form-item label="地址">
                                                <span>{{ props.row.ckAdress }}</span>
                                            </el-form-item>
                                            <el-form-item label="预发货时间">
                                                <span>{{ auto_time_new(props.row.ckYfhsj,6) }}</span>
                                            </el-form-item>
                                            <el-form-item label="制作方式">
                                                <el-tag-s :val="auto_el_tag('ckIsauto',props.row.ckIsauto)"></el-tag-s>
                                            </el-form-item>
                                            <el-form-item label="可用操作">
                                                <el-button
                                                        size="small"
                                                        @click="inlinePrintSortingList(props.$index, props.row)">打印分拣单
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        @click="inlinePrintOrder(props.$index, props.row)">打印追加分拣单
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        type="info"
                                                        v-show="(props.row.ckStatus==21||props.row.ckStatus==31)&&props.row.ckStartwith!=2"
                                                        @click="inlineXj(props.$index, props.row)">下架
                                                </el-button>
                                            </el-form-item>
                                            <el-form-item label="出库备注">
                                                <el-tooltip class="item" effect="dark" :content="props.row.ckRemarks"
                                                            placement="top">
                                                    <span class="remark">{{ props.row.ckRemarks }}</span>
                                                </el-tooltip>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                            </el-carousel-item>
                            <el-carousel-item>
                                <h3>出库明细</h3>
                                <el-table
                                        :data="props.row.mfunckDocs"
                                        highlight-current-row
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            width="55">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品编号"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="baseGoods.bgGoodsNo">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品名称"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="baseGoods.bgGoodsName">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品数量"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="cksGoodsCount">
                                    </el-table-column>
                                    <el-table-column
                                            label="分拣方式"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="cksCkfs">
                                        <template scope="scope">
                                            <span>{{ auto_cksCkfs(scope.row.cksCkfs) }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="批次"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="cksZdpc">
                                    </el-table-column>
                                    <el-table-column
                                            label="库位"
                                            show-overflow-tooltip
                                            align="baseLocation.blLname"
                                            prop="ckXdsj">
                                    </el-table-column>
                                </el-table>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </el-table-column>
                <el-table-column
                        label="物流商"
                        show-overflow-tooltip
                        align="center"
                        prop="rwDoc.ckrwWls">
                </el-table-column>
                <el-table-column
                        label="任务号"
                        show-overflow-tooltip
                        align="center"
                        prop="rwDoc.ckrwNo">
                </el-table-column>
                <el-table-column
                        label="车牌号"
                        show-overflow-tooltip
                        align="center"
                        prop="rwDoc.ckrwCph">
                </el-table-column>
                <el-table-column
                        label="出库单号"
                        width="170"
                        show-overflow-tooltip
                        align="center"
                        prop="ckCkdjNo">
                </el-table-column>
                <el-table-column
                        width="150"
                        align="center"
                        prop="rkSjsj"
                        label="下单时间">
                    <template scope="scope">
                        <span style="margin-left: 10px">{{ auto_time_new(scope.row.ckXdsj) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态"
                        align="center"
                        width="100">
                    <template scope="scope">
                        <el-tag-s :val="auto_el_tag('ckStatus',scope.row.ckStatus)"></el-tag-s>
                    </template>
                </el-table-column>
                <el-table-column
                        v-if="multiSelect"
                        type="selection"
                        width="60">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[5, 10, 15, 20, 100, 500, 1000, 5000, 10000]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="currentTotal">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    <el-dialog
            size="small"
            v-model="dialogSelectVisible">
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectSubmit" :loading="selectLoading">查询</el-button>
        </div>
    </el-dialog>
    <el-dialog
            @open="dialogFormActiveOpen"
            size="small"
            v-model="dialogFormVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">{{form.title}}</span>
            <el-steps
                    v-if="!dialogDistributionForm"
                    class="steps"
                    :space="120"
                    :active="dialogFormActive"
                    finish-rkStatus="success">
                <el-step title="基础信息"></el-step>
                <el-step title="入库明细"></el-step>
            </el-steps>
        </div>
        <el-form :model="form" ref="newForm">
            <el-carousel
                    ref="carousel"
                    :autoplay="false"
                    arrow="never"
                    indicator-position="none"
                    height="55vh">
                <el-carousel-item>
                    <el-row>
                        <el-col :span="24"><h3>入库基础信息</h3></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                    label="入库单号"
                                    prop="rkRkdjNo"
                                    :label-width="formLabelWidth">
                                <el-input
                                        v-model="form.rkRkdjNo"
                                        auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="所属仓库" :label-width="formLabelWidth">
                                <el-select v-model="form.rkArehouseId" placeholder="请选择所属仓库">
                                    <el-option :label="obj.baName" :value="obj.baArehouseId"
                                               v-for="obj of baseArehouses"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="订单类型" :label-width="formLabelWidth">
                                <el-select v-model="form.rkType" placeholder="请选择单据类型">
                                    <el-option label="采购订单" :value="0"></el-option>
                                    <el-option label="仓间挑拨" :value="1"></el-option>
                                    <el-option label="退货入库" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库备注" :label-width="formLabelWidth">
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        v-model="form.rkRemarks"
                                        auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="2">
                            <el-form-item label="入库状态">
                                {{form.rkrkStatus}}
                            </el-form-item>
                            <el-form-item label="入库数量">
                                {{form.rksCount}}
                            </el-form-item>
                            <el-form-item label="入库体积">
                                {{form.allTj }}
                            </el-form-item>
                            <el-form-item label="制作方式">
                                {{form.rkrkZdfs }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                    <el-row v-if="!dialogDistributionForm">
                        <el-col :span="24"><h3>入库明细</h3></el-col>
                    </el-row>
                    <el-row v-if="!dialogDistributionForm">
                        <el-col :span="12">
                            <el-form-item label="货品编号" :label-width="formLabelWidth">
                                <el-autocomplete
                                        :fetch-suggestions="querySearchAsync"
                                        v-model="form.selectGood.baseGoods.bgGoodsNo"
                                        @select="GoodSelect"
                                        auto-complete="off"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                    label="货品数量"
                                    :label-width="formLabelWidth">
                                <el-input
                                        :disabled="form.selectGood.value==''"
                                        v-model.number="form.selectGood.rksCount"
                                        auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="!dialogDistributionForm">
                        <el-col :span="8">
                            <el-form-item label="货品编号" :label-width="formLabelWidth">
                                <strong>{{form.selectGood.baseGoods.bgGoodsNo}}</strong>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="货品名称" :label-width="formLabelWidth">
                                <el-tooltip class="item" effect="dark"
                                            :content="form.selectGood.baseGoods.bgGoodsName"
                                            placement="top">
                                    <strong class="bgGoodsName">{{form.selectGood.baseGoods.bgGoodsName}}</strong>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="货品数量" :label-width="formLabelWidth">
                                <strong>{{form.selectGood.rksCount}}</strong>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="!dialogDistributionForm">
                        <el-col :span="8" :offset="16">
                            <el-button size="small" @click="saveARkDocsList"
                                       :disabled="form.saveARkDocsList">保存明细
                            </el-button>
                            <el-button size="small" @click="deleteARkDocsList" :disabled="form.deleteARkDocsList"
                                       type="danger">删除明细
                            </el-button>
                        </el-col>
                    </el-row>

                    <el-row v-if="dialogDistributionForm">
                        <el-col :span="24"><h3 style="margin: 0;margin-top: 5px;margin-left: 30px;">入库单清单</h3></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" style="margin-top: 5px">
                            <el-table
                                    @row-click="GoodClick"
                                    height="200"
                                    :data="form.rkDocsList">
                                <el-table-column
                                        type="index"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        label="货品编号"
                                        width="140"
                                        show-overflow-tooltip
                                        align="center"
                                        prop="baseGoods.bgGoodsNo">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="baseGoods.bgGoodsName"
                                        show-overflow-tooltip
                                        label="货品名称">
                                </el-table-column>
                                <el-table-column
                                        label="单位"
                                        width="80"
                                        prop="baseDw.bdName"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="数量"
                                        width="100"
                                        show-overflow-tooltip
                                        prop="rksCount"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        v-if="dialogDistributionForm"
                                        label="可用操作"
                                        width="100"
                                        prop="rksCount"
                                        align="center">
                                    <template scope="scope">
                                        <el-button
                                                size="small"
                                                type="info"
                                                :disabled="!scope.row.rksKyCount"
                                                :loading="locationLoading"
                                                @click="distributionBtnLocation(scope.$index, scope.row)">关联
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>

                    <el-row v-if="dialogDistributionForm">
                        <el-col :span="24"><h3 style="margin: 0;margin-top: 5px;margin-left: 30px;">库存储位信息</h3></el-col>
                    </el-row>
                    <el-row v-if="dialogDistributionForm">
                        <el-col :span="24" style="margin-top: 5px">
                            <el-table
                                    height="200"
                                    :data="location">
                                <el-table-column
                                        type="index"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        label="货品名称"
                                        width="140"
                                        show-overflow-tooltip
                                        align="center"
                                        prop="selectGood.baseGoods.bgGoodsName">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="selectGood.baseGoods.bgGoodsNo"
                                        show-overflow-tooltip
                                        label="货品编号">
                                </el-table-column>
                                <el-table-column
                                        label="数量"
                                        width="80"
                                        prop="selectGood.rksCount"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="库位名称"
                                        width="100"
                                        show-overflow-tooltip
                                        prop="blLname"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="货品批号"
                                        width="100"
                                        show-overflow-tooltip
                                        prop="lala"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        width="100"
                                        prop="rksCount"
                                        align="center">
                                    <template scope="scope">
                                        <el-button
                                                size="small"
                                                type="danger"
                                                icon="delete"
                                                @click="distributionBtnLocationDelete(scope.$index, scope.row)">
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
            <el-dialog
                    :modal="false"
                    size="small"
                    v-model="dialogLocationVisible">
                <div class="dialog-title clearfix" slot="title">
                    <span class="el-dialog__title">关联</span>
                </div>
                <el-form-item label="货品名称" :label-width="formLabelWidth">
                    <el-tooltip class="item" effect="dark"
                                :content="form.location.selectGood.baseGoods.bgGoodsName"
                                placement="top">
                        <span class="bgGoodsNameLocation">{{form.location.selectGood.baseGoods.bgGoodsName}}</span>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="货品编号" :label-width="formLabelWidth">
                    {{form.location.selectGood.baseGoods.bgGoodsNo}}
                </el-form-item>
                <el-form-item label="分配数量" :label-width="formLabelWidth">
                    <el-input
                            v-model.number="form.location.selectGood.rksCount"
                            auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="库位名称" :label-width="formLabelWidth">
                    <el-autocomplete
                            :fetch-suggestions="queryLocationAsync"
                            v-model="form.location.blLname"
                            @select="locationSelect"
                            auto-complete="off"></el-autocomplete>
                </el-form-item>
                <el-form-item label="货品批号" :label-width="formLabelWidth">
                    <el-input
                            v-model.number="form.location.lala"
                            auto-complete="off"></el-input>
                </el-form-item>

                <div slot="footer" class="dialog-footer">
                    <el-button
                            type="primary"
                            @click="locationSubmit"
                            :loading="locationLoading">关联
                    </el-button>
                </div>
            </el-dialog>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="prev" v-show="dialogFormActive && !dialogDistributionForm">上一步
            </el-button>
            <el-button type="primary" @click="next" v-show="dialogFormActive < 1">下一步</el-button>
            <el-button type="primary" @click="submit" :loading="submitLoading" v-show="dialogFormActive >= 1"
                       :disabled="form.rkDocsList.length==0" v-if="!dialogDistributionForm">保存
            </el-button>
            <el-button type="primary" @click="distributionBtnSubmit" :loading="submitLoading"
                       v-show="dialogFormActive >= 1"
                       :disabled="form.rkDocsList.length==0" v-if="dialogDistributionForm">分配
            </el-button>
        </div>
    </el-dialog>

</div>
<link rel="stylesheet" href="index.scss">
<script src="index.js">

</script>





